<template>
	<view class="container">
		<view class="head mb-30">
			<view class="tabs flex align-end">
				<view
					class="item w-50 flex justify-center align-center sel"
					:class="current === index ? item.style1 : item.style2"
					v-for="(item, index) in siderList"
					:key="item.id"
					@click="onTabs(index)"
				>
					<image class="width-30 height-30" :src="current === index ? item.icon2 : item.icon1"></image>
					<text class="ml-10">{{ item.name }}</text>
				</view>
			</view>
			<!-- 内容区域 -->
			<view class="bg-white border-radius-br-10 border-radius-bl-10 padding-30 height-170">
				<!-- 到店 -->
				<view class="arrival" v-if="FType !== 3">
					<view class="dinner-in" v-if="FType === 1">
						<!-- 堂食-->
						<view style="display: flex; justify-content: space-between">
							<view class="fsize-32 fweigh-600">堂食台号：#{{ stock.deskNumber }}</view>
							<view class="fsize-22 line-gray mt-10">餐品将送至您的餐台</view>
						</view>
					</view>
					<!--  -->
					<view v-else class="flex align-center justify-between">
						<!-- 外带-->
						<view class="flex align-center">
							<text class="fsize-28 fweigh-600">{{ stock.storeName }}</text>
							<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
						</view>
						<view class="mt-10 fsize-24 line-gray">{{ stock.address }}</view>
					</view>
					<!--  -->
					<!-- 按钮模式start -->
					<view class="order-mode" style="margin-top: 20rpx">
						<view :class="{ active: FType === 2 }" @tap="eatMethod(2)">外带</view>
						<view :class="{ active: FType === 1 }" @tap="eatMethod(1)">堂食</view>
					</view>
					<!-- 模式end -->
				</view>

				<!-- 外卖 -->
				<view class="take-out" v-else>
					<view v-if="address.id" style="padding-left: 20rpx" @click="$u.route('/pages/user/address/address', { address: true })">
						<view class="userInfo">
							<view>{{ address.street }}</view>
							<view>{{ address.houseNumber }}</view>
							<u-icon name="arrow-right" color="#9d9d9d" size="15"></u-icon>
						</view>
						<view class="user-address">
							<view style="margin-right: 10rpx">{{ address.name }}</view>
							<view>{{ address.mobile }}</view>
						</view>
					</view>
					<!-- 无地址 -->
					<view
						v-else
						style="font-size: 32rpx; display: flex; line-height: 100rpx; padding-left: 30rpx"
						@click="$u.route('/pages/user/address/address', { address: true })"
					>
						请选择配送地址
						<u-icon name="arrow-right" color="#9d9d9d" size="15"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<view class="mb-30 bg-white border-radius-10" style="padding: 10rpx">
			<view class="padding-30" v-for="(item, index) in cart" :key="item.id">
				<view class="flex w-100">
					<image style="border-radius: 10rpx" class="width-109 height-109 shrink0 mr-10" :src="item.FPic"></image>
					<view class="w-100 flex justify-between">
						<view class="w-100" style="display: flex;justify-content: space-between;flex-direction: column;·">
							<view class="fsize-28">{{ item.FName }}</view>
							<view style="font-size: 20rpx; color: #999999" v-if="item.foodType !== 2">{{ item.FSpec }} {{ item.FeedTasteNames }}</view>
							<view style="font-size: 20rpx; color: #999999" v-else>
								{{ detailList[index].map((v) => v.foodName + '× ' + v.quantity) }}
							</view>
						</view>
						<view class="flex flex-column justify-between shrink0 ml-10 text-align-right">
							<view v-if="item.discountPrice && !item.activityPrice" style="font-size: 22rpx; color: #999999">
								<text class="fsize-18">￥</text>
								<text class="del" style="margin-right: 10rpx">
									{{ item.FPosPrice }}
								</text>
								<text class="fsize-24" style="color: #ec3e40">
									<text style="font-size: 20rpx">特价商品￥</text>
									{{ item.discountPrice }}
								</text>
							</view>
							<view v-else style="font-size: 22rpx; color: #999999">
								<text class="fsize-18" v-if="!item.activityPrice">￥</text>
								<text
									v-if="!item.activityPrice"
									:class="{
										del: item.vipPrice && userInfo.id
									}"
									style="margin-right: 10rpx"
								>
									{{ item.FPosPrice }}
								</text>
								<text v-if="item.vipPrice && !item.activityPrice" class="fsize-24" style="color: #ec3e40">
									<text style="font-size: 20rpx">会员价￥</text>
									{{ item.vipPrice }}
								</text>
								<text v-if="item.activityPrice" class="fsize-24" style="color: #ec3e40">
									<text style="font-size: 20rpx">加购价￥</text>
									{{ item.activityPrice }}
								</text>
							</view>

							<text class="fsize-26 line-gray">x{{ item.number }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 菜品推荐 -->
			<view class="recommend-box" v-if="recommendList.length > 0">
				<view class="title">商品推荐</view>
				<view class="padding-30" v-for="(item, index) in recommendList" :key="item.id">
					<view class="flex w-100">
						<image style="border-radius: 10rpx" class="width-109 height-109 shrink0 mr-10" :src="item.image"></image>
						<view class="w-100 flex justify-between">
							<view class="w-100" style="display: flex; flex-direction: column; justify-content: space-between">
								<view class="fsize-28" style="display: flex; align-items: center">
									<!-- <view class="special-box" v-if="item.vipPrice">会员特价</view> -->
									<view>{{ item.name }}</view>
								</view>
								<view v-if="item.discountPrice" style="font-size: 22rpx; color: #999999; display: flex; align-items: flex-end">
									<text style="font-size: 24rpx; color: #ec3e40">
										￥{{ item.discountPrice }}
										<text style="color: #eeb139; font-size: 20rpx; margin-left: 10rpx">推荐</text>
									</text>
									<bubble-box title="特价商品"></bubble-box>
									<text class="fsize-20">￥</text>
									<text class="del">{{ item.price }}</text>
								</view>
								<view v-else style="font-size: 22rpx; color: #999999; display: flex; align-items: flex-end">
									<text style="font-size: 24rpx" :style="{ color: item.showPriceName === '原价' && userInfo.id ? '#ec3e40' : '#111' }">
										￥{{ item.realPrice }}
										<text style="color: #eeb139; font-size: 20rpx; margin-left: 10rpx">推荐</text>
									</text>
									<text :style="{ color: item.showPrice && item.showPriceName !== '原价' ? '#ec3e40' : '#999' }" v-if="item.showPrice" class="fsize-20">￥</text>
									<text
										v-if="item.showPrice"
										:style="{ color: item.showPrice && item.showPriceName !== '原价' ? '#ec3e40' : '#999' }"
										:class="{ del: item.showPriceName === '原价' && userInfo.id }"
									>
										{{ item.showPrice }}
									</text>
									<bubble-box :title="item.showPriceName" v-if="item.showPrice && item.showPriceName !== '原价'"></bubble-box>
								</view>

								<!--  
				<text style="font-size: 24rpx; color: #111">
                  ￥{{ item.vipPrice || item.price }}
                  <text v-if="item.vipPrice" style="color: #eeb139; font-size: 20rpx; margin-left: 10rpx">推荐</text>
                </text>
				 -->
								<!-- <text class="fsize-26 line-gray">x{{item.number}} </text> -->
							</view>
							<view style="display: flex; align-items: flex-end">
								<Action :number="item.number" :materialsBtn="false" @minus="onMinus(item, index)" @add="onAdd(item)"></Action>
							</view>
						</view>
					</view>
				</view>
				<view class="more" v-if="allRecommendList.length > 3">
					<u-icon
						@click="onMore"
						label="展示更多"
						:name="isMore ? 'arrow-up' : 'arrow-down'"
						labelSize="24rpx"
						labelColor="#999999"
						color="#999999"
						size="12px"
						labelPos="left"
						space="5px"
					></u-icon>
				</view>
			</view>

			<list-cell last>
				<view class="w-100 flex justify-between">
					<text class="fsize-28">优惠卷</text>
					<view
						class="flex align-center"
						@click="
							$u.route('/pages/user/coupon/coupon', {
								tickets: JSON.stringify(coupons)
							})
						"
					>
						<!-- 路由跳转，携带参数-->
						<text v-if="!coupon.id" class="fsize-24 line-gray">{{ coupons.length > 0 ? coupons.length + '张' : '暂无可用' }}</text>
						<text v-else class="fsize-24 line-red">-￥{{ coupon.reduceAmount }}</text>
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
					</view>
				</view>
			</list-cell>
			<!-- 余额 -->
			<list-cell last>
				<view class="w-100 flex justify-between">
					<text class="fsize-28">账户余额</text>
					<view>{{ balance }}元</view>
				</view>
			</list-cell>
			<!-- 余额 -->

			<!-- 支付方式start -->
			<view style="padding: 20rpx">
				<text style="display: block; margin: 20rpx 0 10rpx; font-size: 24rpx; color: #adadad">支付方式</text>
				<view class="pay-method" v-for="(item, index) in systemInfo.hostName === 'alipay' ? payMethodsAlipay : payMethods" :key="item.value">
					<u-icon :label="item.label" :name="item.name" :color="item.color" size="22"></u-icon>
					<u-icon v-if="item.isShow" :name="item.isPayMethod ? item.selected : item.unSelected" color="#a78851" size="22" @click="onCheckPay(index)"></u-icon>
					<!-- <view v-else>余额不足</view> -->
					<view v-else style="display: flex; align-items: center" @click="onVoucher">
						余额不足，请充值
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
					</view>
				</view>
			</view>
			<!-- 支付方式end -->

			<list-cell last>
				<view class="w-100 flex justify-end align-center fsize-26">
					<text class="" v-if="userInfo.id">共优惠{{ reduceAmount }}元</text>
					<!-- 跳转到登录界面 -->
					<!-- 	<text v-else>预计优惠{{ reduceAmount }}元，请登录会员</text> -->
					<view v-else @click="$u.route('/pages/login/login')" style="display: flex; align-items: center">
						预计优惠
						<text style="color: #ec3e40; margin: 0 10rpx">{{ reduceAmount }}</text>
						元，请登录会员
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
					</view>
				</view>
			</list-cell>

			<list-cell last>
				<view class="w-100 flex justify-end align-center fsize-26">
					<text class="">共{{ cartNum }}件商品，合计</text>
					<view class="fweigh-600">
						<text class="fsize-30">￥</text>
						<text class="fsize-40">{{ cartAmount.toFixed(2) }}</text>
					</view>
				</view>
			</list-cell>
		</view>
		<!-- <view class="" style="padding-bottom: 20rpx;">
			<list-cell last radius>
				<view class="w-100 flex justify-between align-center">
					<text class="fsize-28">备注</text>
					<view class="flex align-center">
						<text class="fsize-24 mr-10">--</text>
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png" @click="onRemark"></image>
					</view>
				</view>
			</list-cell>
		</view> -->

		<view style="padding-bottom: 30rpx">
			<list-cell last radius>
				<view class="w-100 flex justify-between align-center">
					<text class="fsize-28">备注</text>
					<view class="flex align-center" @click="onRemark">
						<text class="fsize-24 mr-10" v-if="!remark">--</text>
						<text class="fsize-24 mr-10" v-else-if="remark && remark.length < 5">{{ remark }}</text>
						<text class="fsize-24 mr-10" v-else>{{ remark.substring(0, 5) }}...</text>
						<image class="width-30 height-30 shrink0" src="../../static/images/my/icon_arrow.png"></image>
					</view>
				</view>
			</list-cell>
		</view>
		<view class="footer">
			<view class="">
				<text>应付：</text>
				<text class="fweigh-600">
					<text class="fsize-30">￥</text>
					<text class="fsize-40">{{ cartAmount.toFixed(2) }}</text>
				</text>
			</view>
			<button @click="createOrder">立即支付</button>
		</view>
		<u-toast ref="uToast" />

		<!-- 特价加购 -->

		<uni-popup ref="popup" type="center" border-radius="10px 10px 0 0" :is-mask-click="false">
			<!-- <view class="special-popup"> -->
			<SpecialBuy :isUpdate="isUpdate" :increaseList="increaseList" title="特价加购" @onclose="onClose" @addIncrease="addIncrease"></SpecialBuy>
			<!-- </view> -->
		</uni-popup>

		<ProductPopup :materialsOtherData="materialsOtherData" @cancel="closeVisable" @addToCart="addToCart" :visible="isVisable" :product="productData"></ProductPopup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import listCell from '@/components/list-cell/list-cell.vue';
// import { requestPayment } from "@/utils/payment";
import { pay } from '@/common/util.js';
import Action from '@/pages/tab_bar/classify/components/actions/actions.vue';
import ProductPopup from '@/pages/tab_bar/classify/components/product-popup/product-popup.vue';
import SpecialBuy from '@/components/special-buy/special-buy.vue';
import { uRequestSubscribeMessage } from '../../utils/uniUtils';
import common from '@/common/util.js';
export default {
	components: {
		listCell,
		Action,
		ProductPopup,
		SpecialBuy
	},
	data() {
		return {
			systemInfo: common.getSystemInfo(),
			isOne: false, // 菜品加购只在第一次出现
			isUpdate: true,
			shoppingCartType: null, // 判断是否是加购菜获取购物车
			startX: 0,
			startY: 0,
			isVisable: false, // 弹出加入购物车
			productData: {},
			isMore: false, // 是否展示更多推荐
			recommendList: [], // 推荐数组
			allRecommendList: [],
			isTemp: false,
			isBuy: false,
			tempOrderId: 0,
			orderId: 0,
			current: 0,
			FType: 1,
			timer: null,
			materialsOtherData: {},
			payClassId: null,
			payOrderId: null,
			tabList: [
				{
					id: 1,
					name: '堂食',
					icon1: '../../static/images/pay/ts-s.png',
					icon2: '../../static/images/pay/ts.png',
					style1: 'sel',
					style2: 'nosel'
				},
				{
					id: 2,
					name: '外带',
					icon1: '../../static/images/pay/dd-s.png',
					icon2: '../../static/images/pay/dd.png',
					style1: 'ser',
					style2: 'noser'
				}
			],
			siderList: [
				{
					id: 1,
					name: '到店自取',
					icon1: '../../static/images/pay/ts-s.png',
					icon2: '../../static/images/pay/ts.png',
					style1: 'sel',
					style2: 'nosel'
				},
				{
					id: 3,
					name: '外卖配送',
					icon1: '../../static/images/pay/dd-s.png',
					icon2: '../../static/images/pay/dd.png',
					style1: 'ser',
					style2: 'noser'
				}
			],
			cart: [],
			coupons: [],
			coupon: {
				id: 0,
				reduceAmount: 0
			},
			payMethods: [
				{
					label: '微信支付',
					value: 'wechatpay',
					name: 'weixin-fill',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: true,
					isShow: true
				},
				{
					label: '余额支付',
					value: 'balancepay',
					name: 'rmb',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: false,
					isShow: false
				}
				// {label:'支付宝支付',value:'alipay',name:'zhifubao',selected:'checkmark-circle-fill',unSelected:'checkmark-circle',color:'#409eff',isPayMethod:false},
			],

			payMethodsAlipay: [
				// {
				// 	label: '微信支付',
				// 	value: 'wechatpay',
				// 	name: 'weixin-fill',
				// 	selected: 'checkmark-circle-fill',
				// 	unSelected: 'checkmark-circle',
				// 	color: '#51b133',
				// 	isPayMethod: true,
				// 	isShow: true
				// },
				{
					label: '支付宝支付',
					value: 'alipay',
					name: 'zhifubao',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#409eff',
					isPayMethod: true,
					isShow: true
				},
				{
					label: '余额支付',
					value: 'balancepay',
					name: 'rmb',
					selected: 'checkmark-circle-fill',
					unSelected: 'checkmark-circle',
					color: '#51b133',
					isPayMethod: false,
					isShow: false
				}
				// {label:'支付宝支付',value:'alipay',name:'zhifubao',selected:'checkmark-circle-fill',unSelected:'checkmark-circle',color:'#409eff',isPayMethod:false},
			],

			payment_code: common.getSystemInfo().hostName === 'WeChat' ? 'wechatpay' : 'alipay',
			balance: 0, // 余额
			reduceAmount: 0, // 优惠多少钱
			increaseList: [], // 加购菜列表
			fristLoad: 0 // 表示第一个进入结算页拿购物车的标识Id
		};
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	watch: {
		balance: {
			handler(val) {
				if (val < this.cartAmount) {
					// 判断余额是否大于商品价格
					// #ifdef MP-ALIPAY
					this.payMethodsAlipay[1].isShow = false;
					// #endif
					// #ifdef MP-WEIXIN
					this.payMethods[1].isShow = false;
					// #endif
				} else {
					// #ifdef MP-ALIPAY
					this.payMethodsAlipay[1].isShow = true;
					// #endif
					// #ifdef MP-WEIXIN
					this.payMethods[1].isShow = true;
					// #endif
				}
			}
		},
		address: {
			handler(val) {
				const _that = this;
				if (val.id) {
					_that.FType = 3;
				} else {
					_that.FType = val.num;
					this.current = this.FType === 1 ? 0 : 1;
				}
			},
			immediate: true
		}
	},
	computed: {
		...mapState(['stock', 'orderType', 'address', 'userInfo', 'remark', 'stock']),
		cartNum() {
			return this.cart.reduce((acc, cur) => acc + cur.number, 0);
		},
		cartAmount() {
			let price = 0;
			this.cart.forEach((e) => {
				if (e.activityPrice) {
					price += e.activityPrice * e.number;
				} else {
					if (e.discountPrice) {
						price += e.discountPrice * e.number;
					} else if (this.userInfo.id && e.vipPrice) {
						price += e.vipPrice * e.number;
						// e.feedData?.forEach(v=>{
						// 	price += v.fPrice * fQty
						// })
					} else {
						price += e.FPosPrice * e.number;
						// e.feedData?.forEach(v=>{
						// 	price += v.fPrice * fQty
						// })
					}
				}
			});
			// return this.cart.reduce((acc, cur) => acc + cur.number * cur.FPosPrice, 0) - this.coupon.reduceAmount
			if (this.balance < price - this.coupon.reduceAmount) {
				// 判断余额是否大于商品价格
				// #ifdef MP-ALIPAY
				this.payMethodsAlipay[1].isShow = false;
				// #endif
				// #ifdef MP-WEIXIN
				this.payMethods[1].isShow = false;
				// #endif
			} else {
				// #ifdef MP-ALIPAY
				this.payMethodsAlipay[1].isShow = true;
				// #endif
				// #ifdef MP-WEIXIN
				this.payMethods[1].isShow = true;
				// #endif
			}
			return price - this.coupon.reduceAmount;
		},
		remark() {
			return this.$store.state.remark;
		},
		// 选中套菜
		detailList() {
			const list = this.cart.map((row) =>
				row.detailList.map((v) => {
					return {
						foodName: v.foodName,
						quantity: v.quantity
					};
				})
			);
			return list;
		}
	},
	onShow() {
		this.payOrderId = null;
		this.payOderId = null;
		if (!this.stock.isTakeOut) {
			this.siderList = this.siderList.filter((v, i) => i !== 1); // 判断是否有外卖选项
		}
		this.deskId = uni.getStorageSync('deskId') || 0; // 判断是否有桌台
		// this.getCat()
		Promise.all([this.getCat(), this.getFoodCartShopCouponList()]);
		if (this.address.id) {
			this.FType = 3;
		} else {
			if (this.address.num) {
				// this.FType = this.orderType
				this.FType = this.address.num;
			} else {
				this.FType = 1;
			}
		}
		this.current = this.FType === 1 ? 0 : 1;
		uni.$on('isRefresh', (data) => {
			this.coupon = data;
		});
	},
	// 查看支付结果
	onLoad({ isTemp, isBuy }) {
		this.fristLoad = 1;
		if (isTemp) {
			this.isTemp = isTemp;
		} else {
			this.isTemp = false;
		}
		if (isBuy) {
			this.isBuy = isBuy;
		} else {
			this.isBuy = false;
		}
	},
	onUnload() {
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = null;
		}
		uni.$off('isRefresh');
	},
	methods: {
		getCat() {
			// 开台模式和快餐模式
			// this.$api.GetShoppingCart().then(res=>{
			// this.cart = res.data.length === 0?[]:res.data.map(im=>{
			this.$api
				.GetShoppingCart({
					deskId: this.deskId,
					isTemp: this.isTemp, // 临时数据
					isRecommend: true, // 购物车是否要推荐菜
					isIncrease: true, // 加购菜
					shoppingCartType: this.shoppingCartType, // 加入购物车是否是加购商品
					fristLoad: this.fristLoad,
					isBuy: this.isBuy // 立即购买
				})
				.then((res) => {
					this.reduceAmount = res.data.reduceAmount;
					this.cart =
						res.data.foodList.length === 0
							? []
							: res.data.foodList.map((im) => {
									return {
										vipPrice: im.vipPrice,
										activityPrice: im.activityPrice || null,
										FItemID: im.fSubItemID,
										FFoodID: im.fFoodID,
										FName: im.fName,
										FPosPrice: im.fPosPrice,
										number: im.fQty,
										FPic: im.fProImage,
										FSpec: im.fSpec,
										FFoodSpecID: im.fFoodSpecID,
										FRemark: im.fRemark,
										FeedTasteNames: im.feedTasteNames,
										FShoppingCartID: im.fShoppingCartID || 0,
										feed_ids: im.feedData.length > 0 ? im.feedData.map((jm) => jm.fFeedID) : [],
										tast_ids: im.tastData.length > 0 ? im.tastData.map((jm) => jm.fTastID) : [],
										detailList: im.detailList ? im.detailList || [] : [],
										foodType: im.foodType || 0,
										discountPrice: im.discountPrice || 0
									};
							  });
					// this.getFoodCartShopCouponList()
					this.allRecommendList = res.data.recommendList;
					this.allRecommendList.map((v) => this.$set(v, 'number', 0));
					this.recommendList = JSON.parse(JSON.stringify(this.allRecommendList.slice(0, 3)));
					this.increaseList = res.data.increaseList || [];
					// this.shoppingCartType = null;
					this.increaseList.forEach((v) => {
						v.map((e) => {
							e.shopQty ? this.$set(e, 'number', e.shopQty) : this.$set(e, 'number', 0);
						});
					});
					this.tempOrderId = res.otherData.tempOrderId;
					this.fristLoad = 0;
					// 是否显示推荐菜
					if (this.increaseList.length > 0 && !this.isOne) {
						this.isUpdate = true;
						this.$refs.popup.open('center');
						this.isOne = true;
					}
				});
		},
		onTabs(ix) {
			if (this.current !== ix) {
				this.current = ix;
				if (ix === 0) {
					this.FType = 1;
				} else {
					this.FType = 3;
				}
			}
		},
		async createOrder() {
			/// 订阅服务通知
			// await uRequestSubscribeMessage([
			//   'LPOJNg_fS9sJfRErZXh72ThLwTR5F-GSQoFclphQltQ', // 下单成功通知
			//   // "4ofvDqPjbaP3DwCjcmYx6EfwuGs0mSXIRXeA4UtmDfs", // 取餐通知
			//   '7YLW1updg0ts3Oy0FVjprwRuFo9x99W2oS82VlPs4ME' // 评价通知
			// ]);
			if (this.payClassId && this.payOrderId) {
				pay(this.payOrderId, this.payment_code, this.payClassId, {});
				return;
			}

			let _this = this;
			_this.$api
				.SubmitOrder({
					FType: _this.FType, // 订单模式
					FDeskID: _this.stock.deskId, // 桌台Id
					FCouponID: _this.coupon.id, // 优惠券Id
					reduceAmount: _this.coupon.reduceAmount, // 优惠券价格
					shipId: this.address.id ? this.address.id : 0,
					remark: this.remark,
					isTemp: this.isTemp,
					isBuy: this.isBuy
				})
				.then((res) => {
					// 收银台支付
					this.payClassId = res.data.classId;
					this.payOrderId = res.data.orderId;
					pay(res.data.orderId, this.payment_code, res.data.classId, {});
				});
		},
		onToast(msg) {
			this.$refs.uToast.show({
				message: msg,
				complete() {
					uni.switchTab({
						url: '/pages/tab_bar/order/order'
					});
				}
			});
		},
		getFoodCartShopCouponList() {
			this.$api
				.GetFoodCartShopCouponList({
					// channelValue: this.FType + 1
					channelValue: 2,
					deskId: this.deskId,
					fristLoad: this.fristLoad
				})
				.then((res) => {
					this.coupons = res.data;
					this.balance = res.otherData.balance || 0; // 获取可用余额
				});
		},
		// 选中支付方式
		onCheckPay(index) {
			// #ifdef MP-ALIPAY
			this.payMethodsAlipay.forEach((e) => {
				e.isPayMethod = false;
			});
			this.payMethodsAlipay[index].isPayMethod = !this.payMethodsAlipay[index].isPayMethod;
			this.payment_code = this.payMethodsAlipay[this.payMethodsAlipay.findIndex((e) => e.isPayMethod)].value;
			console.log(this.payment_code, '支付宝');
			// #endif

			// #ifdef MP-WEIXIN
			this.payMethods.forEach((e) => {
				e.isPayMethod = false;
			});
			this.payMethods[index].isPayMethod = !this.payMethods[index].isPayMethod;
			this.payment_code = this.payMethods[this.payMethods.findIndex((e) => e.isPayMethod)].value;
			console.log(this.payment_code, '微信');
			// #endif
		},
		// 选择堂食或外带
		eatMethod(type) {
			this.FType = type;
		},
		// 跳转到备注
		onRemark() {
			uni.navigateTo({
				url: '/pages/pay/remark'
			});
		},
		onVoucher() {
			if (this.userInfo.id) {
				uni.navigateTo({
					url: '/pages/user/recharge/recharge'
				});
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		// 展示更多推荐菜
		onMore() {
			if (this.isMore) {
				this.recommendList = JSON.parse(JSON.stringify(this.allRecommendList.slice(0, 3)));
			} else {
				this.recommendList = JSON.parse(JSON.stringify(this.allRecommendList));
			}
			this.isMore = !this.isMore;
		},
		// onMinus(item,index) {
		// 	// 减数量
		// 	if(item.number < 1) return
		// 	this.allRecommendList[index].number = this.allRecommendList[index].number -1
		// 	this.recommendList[index].number = this.recommendList[index].number-1
		// },
		async onAdd(item) {
			console.log(item);
			if (item.type === 2) {
				this.$u.route('/pages/product/product_detail', { productId: item.id, isDetail: true });
				return;
			}
			// 加数量推荐菜
			// this.allRecommendList[index].number = this.allRecommendList[index].number + 1
			// this.recommendList[index].number = this.recommendList[index].number + 1
			const res = await this.$api.GetSpecBySubId({
				FSubItemID: item.id,
				storeId: this.stock.id,
				specId: item.specId
			});
			this.$set(item, 'materials', res.data);
			this.productData = item;
			this.isVisable = true;
			this.shoppingCartType = 1;
			this.materialsOtherData = res.otherData;
		},
		addToCart(product) {
			// 判断是不是加购价，将数量存起来
			if (product.activityPrice && product.number > product.limit)
				return uni.showToast({
					title: `商品限购${product.limit}份`,
					icon: 'error'
				});
			// 加入购物车
			this.$api
				.AddShoppingCart({
					FFoodID: product.FFoodID || product.id,
					FQty: product.number || 1,
					feed_ids: product.feed_ids || [],
					tast_ids: product.tast_ids || [],
					FFoodSpecID: product.FFoodSpecID || product.specId,
					deskId: this.deskId,
					tempOrderId: this.tempOrderId,
					activityPrice: product.activityPrice || null,
					isTemp: true // 在支付界面加入购物车一定是临时数据
				})
				.then((res) => {
					Promise.all([this.getCat(), this.getFoodCartShopCouponList()]);
					this.closeVisable();
				});
		},
		closeVisable() {
			this.isVisable = false;
			this.productData = {};
		},
		onClose() {
			this.$refs.popup.close();
		},
		// 唤起购物车
		addIncrease(e) {
			this.onAdd(e);
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	height: auto;
	padding: 0 30rpx 120rpx 30rpx;

	.head {
		.tabs {
			.sel {
				height: 84rpx;
				background: #fff;
				font-weight: 600;
				color: #111;
				border-radius: 10rpx 30rpx 0rpx 0rpx;
			}

			.ser {
				height: 84rpx;
				background: #fff;
				font-weight: 600;
				color: #111;
				border-radius: 30rpx 10rpx 0rpx 0rpx;
			}

			.nosel {
				height: 74rpx;
				color: #666;
				background: #ededed;
				border-radius: 10rpx 0 0 0;
			}

			.noser {
				height: 74rpx;
				color: #666;
				background: #ededed;
				border-radius: 0 10rpx 0 0;
			}
		}
	}

	// 菜品推荐
	.recommend-box {
		border-radius: 10rpx;
		background-color: #fff9ed;

		.title {
			padding: 20rpx 30rpx 0;
			color: #333333;
			font-size: 24rpx;
		}

		.more {
			display: flex;
			justify-content: center;
			padding-bottom: 30rpx;
		}
	}

	.special-box {
		font-size: 16rpx;
		line-height: 20rpx;
		color: #edac2f;
		background: linear-gradient(0deg, #111111, #333333);
		border-radius: 4rpx;
		padding: 0 5rpx;
		line-height: 23rpx;
		margin-right: 10rpx;
		border-radius: 4rpx;
	}
}

// 地址盒子
.take-out {
	// height: 150rpx;
	// background-color: #fff;
	// padding: 20rpx;

	.userInfo {
		padding-top: 10rpx;
		display: flex;
		font-size: 30rpx;

		& > view {
			margin-right: 10rpx;
		}
	}

	.user-address {
		display: flex;
		padding-top: 10rpx;
		color: #c1c1c1;
		font-size: 25rpx;
	}
}

.footer {
	background-color: #ffffff;
	z-index: 10;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10rpx 30rpx 60rpx 30rpx;

	button {
		text-align: center;
		padding: 0;
		line-height: 90rpx;
		color: #111111;
		font-size: 30rpx;
		width: 280rpx;
		height: 90rpx;
		font-weight: bold;
		background: linear-gradient(34deg, #f3c45d, #edac2f);
		border-radius: 45rpx;
		margin: 0;
	}
}

.pay-method {
	padding: 0 20rpx;
	height: 100rpx;
	border-bottom: 2rpx solid #f5f5f5;
	border-radius: 10rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.order-mode {
	height: 60rpx;
	width: 100%;
	margin-top: 20rpx;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	color: #a2a1a6;

	& > view {
		border-radius: 30rpx;
		border: 1px solid #e5e5e5;
		width: 300rpx;
		line-height: 60rpx;
		text-align: center;
	}

	.active {
		background-color: #ffeecd;
		border: 1rpx solid #f1be52;
		border-radius: 30rpx;
		color: #f1be52;
	}
}

.del {
	text-decoration: line-through;
}

// 加购菜盒子
.special-popup {
	width: 100%;
}
</style>
